<template>
  <div class="container">
    <div class="top-box">
      <div class="left-box">
        <div class="color-box"></div>
        <p>接待申请详情</p>
      </div>
      <div class="right-box">
     <el-button type="info" icon="el-icon-back" class="btn_fanhui" @click="Return">返回</el-button>
      </div>
    </div>
    <div class="content-box">
           <div class="examine-box">
          <el-steps :active="1" align-center class="step">
          <el-step title="提交申请" description="2019.06.11  09：50"></el-step>
          <el-step title="管理部：已通知" description="2019.06.11  09：50"></el-step>
        </el-steps>
        </div>
      <div class="table-box">
        <div class="nav-box">
          <ul>
            <li>
              <span>姓名：<em>员工1</em></span>
            </li>
            <li>
              <span>部门:<em>管理部</em></span>
            </li>
            <li>
              <span>职位:<em>行政专员</em></span>
            </li>
          </ul>
        </div>
        <div class="body-box">
          <ul>
            <li>
              <div class="item-box">接待时间</div>
              <div class="item3-box">
                                <template>
  <div class="block">
    <el-date-picker
      v-model="value1"
      type="date"
      placeholder="选择日期">
    </el-date-picker>
  </div>
   </template>
              </div>
              <div class="item-box">参与部门</div>
              <div class="item4-box">技术部</div>
              <div class="item-box">参与人数</div>
              <div class="item1-box">10</div>
            </li>
            <li>
                <div class="item-box">接待级别</div>
              <div class="item3-box">初级接待</div>
               <div class="item-box">接待地点</div>
              <div class="item4-box">3号楼2楼会议室</div>
               <div class="item-box">接待用品</div>
              <div class="item1-box">无</div>
            </li>
                <li class="large-box">
             <div class="item8-box">接待原因</div>
              <div class="item9-box">开会</div>
            </li>
          </ul>
        </div>
                  <div class="btn-box">
                   <el-button type="primary">确定</el-button>
          <el-button type="info" @click="Return">返回</el-button>
      </div>
      </div>
 
    </div>

  </div>
</template>
<script>
export default {
   data() {
      return {
        value1:"",
        options: [{
          value: '选项1',
          label: '黄金糕'
        }, {
          value: '选项2',
          label: '双皮奶'
        }, {
          value: '选项3',
          label: '蚵仔煎'
        }, {
          value: '选项4',
          label: '龙须面'
        }, {
          value: '选项5',
          label: '北京烤鸭'
        }],
        value: '',   
      }
    },
         methods:{
    Return(){
      window.history.go(-1);
    }
  }
}
</script>
<style lang="scss" scoped>
@import "@/assets/scss/base.scss";
.top-box{
  width: 100%;
  height: 60px;
  overflow: hidden;
  // border: 1px solid $red;
}
.left-box{
width:120px;
height: 40px;
  float: left;;
margin-top: 10px;
overflow: hidden;
margin-left: 1%;
//  border: 1px solid red;
}
.color-box{
  width:5px;
  height: 20px;
  float: left; 
  margin-top: 10px;
  background-color: $Header_color;
}
.left-box p{
 float: left; 
 margin-left: 5px;
 line-height: 40px;
}
.right-box{
  float:right;
  width:90px;
 height: 40px;
 margin-right: 2%;
 border-radius: 8px;
 margin-top: 10px;
 background-color:$return-color;
  // border: 1px solid red;
}
.right-box:hover{
  background-color: #A4A6AD;
}
.right-box span{
float: left;
color: $white;
font-size: $font-size-medium;
 line-height: 40px;
  //  border: 1px solid red;

}
.right-box img{
  width:30px;
  height: 30px;
  margin-top: 5px;
  margin-left: 6px;
  float: left;
  // border: 1px solid red;
}
.content-box{
width: 98%;
height: 750px;
margin: 0 auto;
border-radius: 8px;
background-color: $white;
border: 1px solid $bordercolor;
}
.table-box{
  width: 90%;
  height: 500px;
  margin: 0 auto;
  // margin-top: 60px;
  // border: 1px solid red;
}
.examine-box{
  width: 100%;
  height: 112px;
  overflow: hidden;
  margin-top: 20px;
  // border: 1px solid red;
}
.leftexam-box{
  width:15%;
  height:110px;
  float: left;
   border-radius: 8px;
  border: 1px solid $bordercolor;
}
.leftexam-box p{
  width: 100%;
  line-height: 70px;
  font-size:$font-size-medium-x; 
  font-weight: bold;
  text-align: center;
}
.leftexam-box span{
  display: inline-block;
  width: 100%;
  font-size:$font-size-medium;
  text-align: center;
}
.Middlexam-box{
  width:69.5%;
  height: 8px;
  margin-top:51px;
  float: left;
  border-top:1px solid #93A0E5;
  border-bottom: 1px solid #93A0E5;
  background-color: #A9B4ED;
}
.rightexam-box{
  width:15%;
  height:110px;
  float: left;
  border-radius: 8px;
  background-color: #5167D2;
  // border:1px solid red;
}
.rightexam-box p{
  width: 100%;
  line-height:70px;
  color: $white;
  font-size:$font-size-medium-x; 
  font-weight: bold;
  text-align: center;
}
.rightexam-box span{
  display: inline-block;
  width: 100%;
   color: $white;
  font-size:$font-size-medium;
  text-align: center;
}
.nav-box{
  width: 100%;
  height: 40px;
  margin-top: 40px;
  background-color: #FAFAFA;
  border: 1px solid $bordercolor;
}
.nav-box ul{
  overflow: hidden;
}
.nav-box li{
  width: 33%;
  height: 40px;
  float: left;
  // border:1px solid red;
}
.nav-box li span{
  display: inline-block;
  width: 100%;
  height: 40px;
  font-size: $font-size-medium;
  line-height: 40px;
  font-weight: bold;
  text-align:center;
}
.nav-box li span em{
  font-weight: normal;
}
.body-box{
width: 100%;
margin-top: 20px;
background-color: $white;
 border-top: 1px solid $bordercolor;
  border-left: 1px solid $bordercolor;
   border-right: 1px solid $bordercolor;
}
.body-box li{
  width: 100%;
  height: 60px;
  display: flex;
  border-bottom: 1px solid  $bordercolor;
}
.item-box{
  width: 12%;
  height: 60px;
  line-height: 60px;
  text-align: center;
  font-size: $font-size-medium;
  color: $fontcolor;
  font-weight: bold;
  border-right: 1px solid  $bordercolor;
}
.item1-box{
  width: 35%;
 height: 60px;
  line-height: 60px;
  text-align: center;
  font-size: $font-size-medium;
  color: $fontcolor;
}
.item3-box{
   width: 35%;
 height: 60px;
  line-height: 60px;
  text-align: center;
  font-size: $font-size-medium;
  color: $fontcolor;
  border-right: 1px solid  $bordercolor;
}
.item4-box{
    width: 35%;
 height: 60px;
  line-height: 60px;
  text-align: center;
  font-size: $font-size-medium;
  color: $fontcolor;
  border-right: 1px solid  $bordercolor;
}
.btn-box{
  width: 20%;
  height: 60px;
  margin: 0 auto;
  margin-top: 50px;
  padding-left: 100px;
  // border: 1px solid red;
}
.item9-box{
  width: 8.5%;
 height: 180px;
  line-height: 180px;
  text-align: center;
  font-size: $font-size-medium;
  color: $fontcolor;
  // border-right: 1px solid  $bordercolor;
}
.body-box .large-box{
  width: 100%;
  height: 258px;
  border-bottom: 1px solid  $bordercolor;
  // border: 1px solid red;
}
.item8-box{
  width: 8.45%;
  height: 258px;
  line-height: 238px;
  text-align: center;
  font-size: $font-size-medium;
  color: $fontcolor;
  font-weight: bold;
  border-right: 1px solid  $bordercolor;
}
.item9-box{
 flex: 1;
height:238px;
  line-height: 238px;
  text-align: center;
  font-size: $font-size-medium;
  color: $fontcolor;
}
</style>
